<script lang="ts" setup name="DeskConfigStyle">
import { onMounted, ref, toRefs, watch } from "vue";
import LaiTitle from "../LaiTitle/index.vue";
import Img from "@/components/Upload/Img.vue";
const props = defineProps<{
  datas: {
    linkName: string; // 文案名字
    linkType: string; // 文案位置
    text: string; // 标题
    linkUrl: string; // 图片地址
    imageList: string[]; // 系统图片地址
    richName: string;
    linkSize: string;
    richType: string;
    richSize: number;
  };
}>();
const { datas } = toRefs(props);
onMounted(() => {
  console.log(111, props);
});

const activeName = ref("system");
const checkIndex = ref<number | string>(0); //选中图片高亮

const onCheck = (index: number, item: string) => {
  // 选择系统图片
  checkIndex.value = index;
  imageUrl.value = item;
};

// 切换上传图片方式
const changeImgMethod = (e: string) => {
  if (e === "custom") {
    checkIndex.value = -1;
    imageUrl.value = "";
  } else {
    checkIndex.value = 0;
    imageUrl.value = datas.value.imageList[0];
  }
};

const imageUrl = ref("");

watch(
  () => imageUrl.value,
  newV => {
    // 监听新的Url通知中间组件更新
    datas.value.linkUrl = newV;
  }
);
</script>

<template>
  <div class="DeskConfigStyle">
    <LaiTitle :title="datas.text"></LaiTitle>
    <el-tabs v-model="activeName" class="desk-tabs" @tab-change="changeImgMethod">
      <el-tab-pane label="系统背景图" name="system">
        <div class="template-list">
          <!-- 防止后台返回图片 -->
          <div>选择背景图</div>
          <div class="img-box">
            <img
              @click="onCheck(index, item)"
              :class="{ active: checkIndex === index }"
              v-for="(item, index) in datas.imageList"
              :key="item"
              :src="item"
              alt=""
            />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="自定义背景图" name="custom">
        <el-form-item label="上传图片：">
          <Img v-model:image-url="imageUrl"></Img>
        </el-form-item>
        <div style="font-size: 12px; color: #666666">建议：请上传1:2比例图片</div>
      </el-tab-pane>
    </el-tabs>
    <div class="form">
      <el-form-item label="主文案：">
        <el-input v-model="datas.linkName" />
      </el-form-item>
      <el-form-item label="主文案位置：">
        <el-radio-group v-model="datas.linkType">
          <el-radio value="left" label="居左"></el-radio>
          <el-radio value="center" label="居中"></el-radio>
          <el-radio value="right" label="居右"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="主文案字号大小：">
        <el-input-number v-model="datas.linkSize"></el-input-number>
      </el-form-item>

      <el-form-item label="副文案：">
        <el-input v-model="datas.richName" />
      </el-form-item>
      <el-form-item label="副文案位置：">
        <el-radio-group v-model="datas.richType">
          <el-radio value="left" label="居左"></el-radio>
          <el-radio value="center" label="居中"></el-radio>
          <el-radio value="right" label="居右"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="副文案字号大小：">
        <el-input-number v-model="datas.richSize"></el-input-number>
      </el-form-item>
    </div>

    <div style="font-size: 12px; color: #666666">声明：若保存时未上传文案和图片则按自定义装饰</div>
  </div>
</template>

<style lang="scss" scoped>
.template-list {
  overflow: hidden;
  .img-box {
    display: flex;
    overflow-x: auto;
    img {
      width: 100px;
      height: 200px;
      margin-top: 10px;
      margin-left: 18px;
      cursor: pointer;
      border: 2px solid transparent;
    }
  }
}
.active {
  border: 2px solid #fdc31d !important;
}
.form {
  margin-top: 20px;
}
</style>
